<template>
<view>
    <view class="content">
        <view class="banner">
            <image src="../../static/pic_daizpz.ad6759f8.jpg" mode=""></image>
        </view>
        <view class="menu">
            <view class="item" v-for="(item,index) in menuList" :key="index" @click="pageJump(item)">
                <view class="bg_box" :style="{'background-color':item.bg}">
                    <neu-icon :type="item.icon" size="50" :color="item.color" />
                </view>
                <text class="text">{{item.name}}</text>
            </view>
        </view>
        <view class="menu_icontxt">
            <view class="item" v-for="(item,index) in menu_list_txticon" :key="index">
                <view class="icon_box">
                    <neu-icon :type="item.icon" size="50" color="#0150AF" />
                </view>
                <text>{{item.name}}</text>
            </view>
        </view>
        <view class="index_tle">
            <text>专题推荐</text>
        </view>
        <view class="special_content">
			<neuIcon type="iconshouye" color="#000" size="40"></neuIcon>
            <view class="item" :style="{'background-color':item.bg}" v-for="(item,index) in special_content" :key="index">
                <text>{{item.name}}</text>
                <view class="icon_box">
                    <neu-icon :type="item.icon" size="50" :color="item.color" />
                </view>
            </view>
        </view>
		<neuIcon type="iconwode" color="#000" size="40"></neuIcon>
        <view class="index_tle">
            <text>业务办理</text>
        </view>
        <view class="business_box">
            <view class="item" v-for="(item,index) in business_box" :key="index">
                <view class="bg_box" :style="{'background-color':item.bg}">
                    <neu-icon :type="item.icon" size="38" color="rgb(101, 144, 252)" />
                </view>
                <text class="text">{{item.name}}</text>
            </view>
        </view>
        <view class="bom_txt">
            <text>本服务由东软集团提供</text>
        </view>
		
		<bomNav/>
    </view>
</view>
</template>

<script>
import Service from "./index.service.js";
import bomNav from "../../components/bomNav.vue"
import svgIcon from "../../components/svgIcon.vue"
export default {
    components: {
        bomNav,
        svgIcon
    },
    onLoad() {},
    methods: {
        pageJump(item) {
            // this.$router.push(item.link)
        }
    },
    data() {
        return {
            title: "Hello",
            menuList: [{
                name: "定点机构",
                icon: "iconjigou",
                link: "/pages/business/query/medical-visit-record/medical-visit-record",
                color: "rgb(249, 99, 98)",
                bg: "rgb(254, 234, 234)"
            }, {
                name: "诊疗目录",
                icon: "iconmulu",
                link: "",
                color: "rgb(255, 191, 64)",
                bg: "rgb(254, 248, 227)"
            }, {
                name: "就诊记录",
                icon: "iconjilu",
                link: "",
                color: "rgb(81, 151, 231)",
                bg: "rgb(236, 248, 255)"
            }, {
                name: "药品目录",
                icon: "iconyaoxiang",
                link: "",
                color: "rgb(67, 111, 241)",
                bg: "rgb(236, 240, 255)"
            }],
            menu_list_txticon: [{
                    icon: "iconyibao",
                    name: "参保信息查询",
                    link: ""
                },
                {
                    icon: "iconxiaofei",
                    name: "划入明细查询",
                    link: ""
                },
                {
                    icon: "iconmingxi",
                    name: "消费明细查询",
                    link: ""
                },
                {
                    icon: "iconzhanghu",
                    name: "账户信息查询",
                    link: ""
                },
            ],
            special_content: [{
                name: "政策法规",
                icon: "iconjigou",
                link: "",
                color: "rgb(249, 99, 98)",
                bg: "rgb(254, 234, 234)"
            }, {
                name: "新闻动态",
                icon: "iconmulu",
                link: "",
                color: "rgb(255, 191, 64)",
                bg: "rgb(254, 248, 227)"
            }, {
                name: "互动问答",
                icon: "iconjilu",
                link: "",
                color: "rgb(81, 151, 231)",
                bg: "rgb(236, 248, 255)"
            }, {
                name: "通知公告",
                icon: "iconyaoxiang",
                link: "",
                color: "rgb(67, 111, 241)",
                bg: "rgb(236, 240, 255)"
            }],
            business_box: [{
                    name: "异地就医",
                    icon: "iconjigou",
                    link: "",
                    color: "rgb(249, 99, 98)",
                    bg: "rgb(232, 240, 255)"
                }, {
                    name: "慢病购药",
                    icon: "iconmulu",
                    link: "",
                    color: "rgb(255, 191, 64)",
                    bg: "rgb(232, 240, 255)"
                }, {
                    name: "药品目录",
                    icon: "iconjilu",
                    link: "",
                    color: "rgb(81, 151, 231)",
                    bg: "rgb(232, 240, 255)"
                }, {
                    name: "定点医院",
                    icon: "iconyaoxiang",
                    link: "",
                    color: "rgb(67, 111, 241)",
                    bg: "rgb(232, 240, 255)"
                },
                {
                    name: "异地就医",
                    icon: "iconjigou",
                    link: "",
                    color: "rgb(249, 99, 98)",
                    bg: "rgb(232, 240, 255)"
                }, {
                    name: "慢病购药",
                    icon: "iconmulu",
                    link: "",
                    color: "rgb(255, 191, 64)",
                    bg: "rgb(232, 240, 255)"
                }, {
                    name: "药品目录",
                    icon: "iconjilu",
                    link: "",
                    color: "rgb(81, 151, 231)",
                    bg: "rgb(232, 240, 255)"
                }, {
                    name: "定点医院",
                    icon: "iconyaoxiang",
                    link: "",
                    color: "rgb(67, 111, 241)",
                    bg: "rgb(232, 240, 255)"
                }
            ]
        };
    }
};
</script>

<style lang="scss">
.scroll-view_H {
    height: calc(100vh - 140rpx);
}

.index_tle {
    display: flex;
    justify-content: flex-start;
    width: 100vw;
    padding-left: 80rpx;
    margin: 20rpx 0;

    text {
        font-size: 36rpx;
    }

}

.menu_icontxt {
    display: flex;
    flex-wrap: wrap;
    margin: 20rpx;

    .item {
        display: flex;
        flex-wrap: wrap;
        width: 305rpx;
        padding: 10rpx 5rpx;
        margin: 20rpx;
        background-color: #F5F6FA;
        font-size: 20rpx;
        align-items: center;
        justify-content: center;
        border-radius: 8rpx;
        overflow: hidden;

        .icon_box {
            width: 80rpx;
            display: inline;
        }
    }
}

.special_content {
    display: flex;
    flex-wrap: wrap;
    margin: 20rpx;

    .item {
        display: flex;
        flex-wrap: wrap;
        width: 305rpx;
        padding: 10rpx 5rpx;
        margin: 20rpx;
        background-color: #F5F6FA;
        font-size: 20rpx;
        align-items: center;
        justify-content: center;
        border-radius: 8rpx;
        overflow: hidden;

        text {
            width: 230rpx;
        }

        .icon_box {
            width: 50rpx;
            display: inline;
        }
    }
}

.menu {
    display: flex;
    flex-wrap: wrap;
    width: 750rpx;
    margin: 20rpx;

    .item {
        width: 25%;
        text-align: center;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;

        .text {
            margin: 20rpx 0;
            display: block;
            color: #666;
        }

        .bg_box {
            background-color: #EEEEEE;
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        image {
            width: 150rpx;
            height: 150rpx;
        }
    }
}

.business_box {
    display: flex;
    flex-wrap: wrap;
    width: 750rpx;
    margin: 20rpx;

    .item {
        width: 25%;
        text-align: center;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;

        .text {
            margin: 20rpx 0;
            display: block;
            color: #666;
        }

        .bg_box {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        image {
            width: 150rpx;
            height: 150rpx;
        }
    }
}

.bom_txt {
    width: 100vw;
    display: flex;
    justify-content: center;
    margin: 40rpx 0;

    text {
        color: #666;
        font-size: 20rpx;

    }
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px 0;

}

.banner {
    image {
        width: 95vw;
        height: 42vw;
    }

}
</style>
